/*
 * @Author: kermit.yu 
 * @Date: 2020-02-22 22:51:09 
 * @Last Modified by: kermit.yu
 * @Last Modified time: 2020-02-24 16:44:44
 */

*{
    box-sizing:border-box;
}

html,body{
    width:100%;
    background-color: #f7f8fa;
}

body{
    padding-top:38px;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
}

#header{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    z-index:999;
    color:#fff;
    text-align:center;
    background-color:#07c160;
    a{
        display:block;
        color:#fff;
        padding:0.5em 1em;
    }
}

#footer{
    padding:0.5em 1em;
    font-size:12px;
    text-align:center;
    color:#999;
    background-color:#ebedf0;
    a{
        color:#666;
        &:hover{
            color:#333;
        }
    }
}

#app{
    display:flex;
    flex-direction:column;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    // 修改vant中popup的关闭按钮
    .van-popup{
        .van-icon{
            z-index: 3;
            .van-icon__image{
                width:42px;
                height:28px;
            }
        }
    }
}

.page{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    padding:1em;
    padding-bottom:40px;
    &.page--start{
        justify-content:flex-start;
        align-items:flex-start;
    }
    .van-cell-group{
        width:100%;
        flex-direction:column;
        .__cell__value{
            padding-left:1em;
        }
        .van-field__body{
            &.--text-left{
                align-items:flex-start;
                text-align:left;
            }
            &.--space-between{
                display:flex;
                justify-content:space-between;
            }
            &.--column{
                display:flex;
                flex-direction:column;
            }
            .value___item{
                width:100%;
                padding:0.3em 0;
                display:flex;
                align-items:center;
                justify-content:space-between;
                + .value___item{
                    border-top:1px solid #ebedf0;
                }
                span{
                    text-align:left;
                }
            }
        }
        // .--flex-end{
        //     display:flex;
        //     justify-content:flex-end;
        // }
    }
    .page-title{
        width:100%;
        text-align:center;
        font-size:18px;
        font-weight:normal;
        padding-bottom:0.5em;
        margin:0;
    }
    .submit-btn{
        margin-top:1em;
    }
}

.tel{
    color:#07c160;
}

.text--green{
    color:#07c160;
}

.text-right{
    text-align:right;
}

// 首页样式
#index{
    width:100%;
    height:100%;
    .van-button{
        + .van-button{
            margin-top:1em;
        }
    }
}

// 登录/注册
#login,#register{
    .register-titile{
        font-size:16px;
        color:#666;
        font-weight:normal;
    }
    .register-tip{
        margin:0;
        width:100%;
        font-size:14px;
        padding-top:0.5em;
        color:#666;
    }
    .van-button{
        margin-top:1em;
    }
    .login-btn{
        margin-top:2em;
    }
}

#login{
    width:100%;
    height:100%;
}

// 酒店列表
#hotelList,#applylList{
    align-items:flex-start;
    justify-content:flex-start;
    padding-top:116px;
    padding-bottom:80px;
    .list-hd{
        position: fixed;
        top:37px;
        left:0;
        width:100%;
        padding:1em;
        background-color:#fff;
        display:flex;
        flex-direction:column;
        z-index: 999;
        .pickers{
            width:100%;
            display:flex;
            justify-content:space-between;
            .van-button{
                .van-button__text{
                    max-width:10em;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                + .van-button{
                    margin-left:5px;
                }
            }
        }
        .van-cell{
            padding-left:0;
            padding-right:0;
            padding-bottom:0;
            .van-field__control{
                line-height:30px;
                border-bottom:1px solid #999;
            }
        }
        &::after{
            position: absolute;
            box-sizing: border-box;
            content: ' ';
            pointer-events: none;
            top: -50%;
            right: -50%;
            bottom: -50%;
            left: -50%;
            border-bottom:1px solid #999;
            -webkit-transform: scale(0.5);
            transform: scale(0.5);
        }
    }
    .item{
        width:100%;
        padding: 10px 16px;
        background-color:#fff;
        .item-hd{
            color: #323233;
            font-size: 14px;
            line-height: 24px;
            display:flex;
            justify-content:space-between;
            .item__value{
                color: #969799;
            }
        }
        .item-bd{
            margin-top: 3px;
            color: #969799;
            font-size: 14px;
            line-height: 21px;
        }
        .item-ft{
            display:flex;
            flex-wrap:wrap;
            justify-content:flex-end;
            align-items:flex-start;
            padding-top:0.5em;
            .van-button{
                + .van-button{
                    margin-left:0.5em;
                }
            }
        }
        + .item{
            border-top:1px solid #ebedf0;
        }
    }
    .item-empty{
        width:100%;
        padding:2em 0;
        font-size:14px;
        color:#6666;
        text-align:center;
    }
    .ft-cover{
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        padding:0 4em 1em 4em;
    }
}

#applylList{
    .list-hd{
        .pickers{
            .van-button{
                .van-button__text{
                    max-width:5em;
                }
            }
        }
    }
}